import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import demoStore from '../../store/demo';
import Child from './Child';
import { observe, runInAction } from 'mobx';

const Demo = () => {
    // 监听mobx触发事件
    useEffect(() => {
        console.log(demoStore.count);
    }, [demoStore.count]);
    const onclick = () => {
        demoStore.addCount();
    };

    return (
        <>
            <div>count为：{demoStore.count}</div>
            <button onClick={onclick}>+1</button>
            <button onClick={() => demoStore.asyncAddCount()}>async +10</button>
            <br/>
            <hr/>
            <button onClick={() => runInAction(() => demoStore.count++)}>+1</button>
            <Child />
        </>
    );
};
// observe(demoStore, (val) => {
//     console.log(val);
// });
// console.log(demoStore);
export default observer(Demo);
